<template>
  <div class="drainageContent">
    <el-tabs
      v-if="routerItem.app_type == 1"
      v-model="activeName"
      @tab-click="tabChange"
    >
      <el-tab-pane
        label="自研播放器"
        name="1"
      > </el-tab-pane>
      <el-tab-pane
        v-permission:player-watch
        label="微信官方播放器"
        name="2"
      > </el-tab-pane>
    </el-tabs>
    <div
      v-if="activeName == 1"
      class="content"
    >
      <Block class="content-table">
        <div class="action-box">
          <BiForm>
            <BiFormItem label="引流名称">
              <template slot="content">
                <el-input
                  v-model="searchData.name"
                  type="text"
                  placeholder="请输入引流规则名称"
                  @change="startSearch"
                ></el-input>
              </template>
            </BiFormItem>
            <!-- <BiFormItem>
            <template slot="button">
              <el-button
                style="margin-left: 10px"
                type="primary"
                :disabled="loading"
                :loading="loading"
                @click="startSearch"
              >查询</el-button>
              <el-button @click="reset">重置</el-button>
            </template>
          </BiFormItem> -->
          </BiForm>

          <div class="left"></div>
          <div class="right">
            <el-button
              type="primary"
              @click="addRule"
            >新建引流规则</el-button>

          </div>
        </div>

        <!-- v-permission:distribution-watchDetails -->
        <div class="table-table">
          <BiTable
            :loading="loading"
            :data="tableData"
            size="medium"
            :column="tableColums"
            fixed="sticky"
            fixed-offset="50"
            pagination
            layout="total, prev, pager, next"
            :auto-scroll="false"
            :total="page_info.total"
            :page.sync="page_info.page"
            :limit.sync="page_info.page_size"
            @pagination="handlePageChange"
          >
            <template v-slot:zip="{ row }">
              <el-button
                type="text"
                size="medium"
                @click="edit(row)"
              >
                编辑
              </el-button>
            </template>
          </BiTable>
        </div>
      </Block>
      <BiDrawer
        v-model="drawer.visible"
        :drawer-title="drawer.title"
        :row-info="drawer.row"
        :component="AddRule"
        drawer-size="700px"
        @ok="onOk"
      ></BiDrawer>
    </div>
    <div
      v-else-if="activeName == 2"
      class="videoContent"
    >
      <el-form
        ref="form"
        :model="ruleForm"
        label-width="80px"
        label-position="top"
      >
        <el-form-item
          label="关注公众号"
          prop="app_id"
        >
          <el-select
            v-model="ruleForm.app_id"
            placeholder="请选择公众号"
            style="width: 300px;"
            clearable
            remote
            filterable
            :remote-method="remoteMethod"
            @change="officialListResult"
          >
            <el-option
              v-for="(item, index) in optionsList.officialList"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="infoContent">
            <p>1. 受官方接口限制，如短剧使用微信官方播放器，则一个小程序只能引导关注一个公众号</p>
            <p>2. 小程序、公众号绑定关系设置，请按文档操作，请点击查看 <el-link
              style="margin-top:-3px;"
              type="primary"
              href="https://docs.qq.com/doc/DRVZ2V0lrSHFqZndH"
            >参考文档</el-link></p>
          </div>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button
          :loading="saveloading"
          type="primary"
          class="btn"
          @click="saveConfigData"
        >保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { flowList, appPlayerOfficial, playerOfficial } from '@/api/drainageRule'
import AddRule from './component/addRule.vue'
import { commonData } from '@/api/common'
export default {
  data() {
    return {
      loading: false,
      searchData: {
        name: ''
      },
      ruleForm: {
        id: '',
        app_id: '',
        app_name: '',
        mini_app_id: window.localStorage.getItem('mini_app_id')
      },
      saveloading: false,
      routerItem: { app_type: 1 }, // 选择的小程序  app_type :1 微信小程序 2 抖音小程序
      activeName: '1', // 1 自研播放器 2 微信官方播放器
      tableData: [],
      tableColums: [
        {
          label: '引流规则',
          prop: 'id',
          minWidth: 180,
          render(h, { row }) {
            return (
              <div>
                <div>{row.name}</div>
                <div style={'color:#86909C'}>ID:{row.id}</div>
              </div>
            )
          }
        },
        {
          label: '引流公众号',
          minWidth: 180,
          prop: 'app_name'
        },
        {
          label: '关注链接',
          prop: 'follow_link',
          minWidth: 300,
          render(h, { row }) {
            return <div class='follow_link'>{row.follow_link}</div>
          }
        },
        {
          label: '引流方式',
          prop: 'type',
          minWidth: 220,
          render(h, { row }) {
            return (
              <div class='scene-box'>
                {row.scene.map((item, index) => {
                  return (
                    <span>
                      {index > 0 ? '，' : ''}
                      <span class='scene'>{item == 1 ? '播放页-浮标' : item == 2 ? '播放页-弹窗' : '剧场页-浮标'}</span>
                    </span>
                  )
                })}
              </div>
            )
          }
        },
        {
          label: '播放页弹窗设置',
          prop: 'pop_strategy',
          minWidth: 160,
          render(h, { row }) {
            if (row.pop_strategy == 0) {
              return <div>-</div>
            } else {
              return <div>{row.pop_strategy == '1' ? '仅首集付费集弹' : row.pop_strategy == '2' ? '每集付费集都弹' : row.pop_strategy == '3' ? '仅设置集弹' : '设置集及后每集都弹'}</div>
            }
          }
        },
        {
          label: '关注集',
          prop: 'num',
          render(h, { row }) {
            if (row.num == 0) {
              return <div>-</div>
            } else {
              return <div>{row.num}</div>
            }
          },
          minWidth: 120
        },
        {
          label: '创建人',
          minWidth: 120,
          prop: 'creator'
        },
        {
          label: '创建时间',
          minWidth: 120,
          prop: 'create_time',
          render: (h, { row }) => {
            if (row.create_time) {
              return (
                <span>
                  <p>{row.create_time.split(' ')[0] || ''}</p>
                  <p>{row.create_time.split(' ')[1] || ''}</p>
                </span>
              )
            }
          }
        },
        {
          label: '操作',
          prop: 'zip',
          minWidth: 140,
          slotScope: true
        }
      ],
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      drawer: {
        visible: false,
        title: '',
        row: {}
      },
      optionsList: {
        officialList: []
      },
      AddRule: AddRule
    }
  },
  created() {
    this.routerItem = JSON.parse(window.localStorage.getItem('routerItem'))
    console.log(this.routerItem, 'routerItem')
  },
  mounted() {
    this.getFlowList()
    this.playerOfficial()
    if (this.routerItem.app_type == 1) {
      this.$AccessReport.report('drainageRule-index', [this.$store.state.user.routerItem.name, '引流规则', '自研播放器'])
    } else {
      this.$AccessReport.report('drainageRule-index', [this.$store.state.user.routerItem.name, '引流规则'])
    }
  },
  methods: {
    // 当前绑定的播放器信息
    async playerOfficial() {
      const res = await playerOfficial()
      res.data.official_app_id ? this.ruleForm.app_id = res.data.official_app_id : ''
      res.data.id ? this.ruleForm.id = res.data.id : ''
      res.data.official_name ? this.ruleForm.app_name = res.data.official_name : ''
      this.officialListType('')
    },
    officialListResult(value) {
      if (value) {
        const item = this.optionsList.officialList.find((item) => item.value === value)
        this.ruleForm.app_name = item.label || ''
      }
    },
    tabChange() {
      let tabName = ''
      if (this.routerItem.app_type == 1) {
        if (this.activeName == 1) {
          tabName = '自研播放器'
        } else {
          tabName = '微信官方播放器'
        }
      }
      this.$AccessReport.report('drainageRule-index', [this.$store.state.user.routerItem.name, '引流规则', tabName])
    },
    remoteMethod(query) {
      this.officialListType(query)
    },
    // 公众号下拉
    async officialListType(name) {
      const res = await commonData({
        type: 'officialList',
        value: name,
        page: 1,
        page_size: 20
      })
      if (this.ruleForm.app_name && this.ruleForm.app_id && name === '') {
        if (!res.data.data.some((item) => item.value == this.ruleForm.app_id)) {
          res.data.data.unshift({
            label: this.ruleForm.app_name,
            value: this.ruleForm.app_id
          })
        }
        this.optionsList.officialList = res.data.data
      } else {
        this.optionsList.officialList = res.data.data
      }
    },
    handlePageChange(value) {
      this.page_info.page = value.page
      this.getFlowList()
    },
    startSearch() {
      this.page_info.page = 1
      this.getFlowList()
    },
    getFlowList() {
      this.loading = true
      flowList({ ...this.searchData, ...this.page_info })
        .then((res) => {
          if (res.status_code === 1) {
            this.tableData = res.data.data
            this.page_info = {
              ...res.data.page_info,
              total: res.data.page_info.total * 1
            }
          }
          this.loading = false
        })
        .finally((error) => {
          console.log(error)
          this.loading = false
        })
    },
    onOk() {
      console.log('----------------------------------')
      this.startSearch()
    },
    edit(row) {
      this.drawer = {
        visible: true,
        title: '编辑引流规则',
        row: row
      }
    },
    addRule() {
      this.drawer = {
        visible: true,
        title: '新建引流规则',
        row: {}
      }
    },
    reset() {
      this.searchData = {
        name: ''
      }
    },
    async saveConfigData() {
      this.saveloading = true
      const res = await appPlayerOfficial(this.ruleForm)
      this.saveloading = false
      if (res.status_code === 1) {
        this.$message.success(res.msg)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.payment-miniapp-tab {
  height: 70px;
}

.drainageContent {
  width: 100%;
  height: 100%;
  position: relative;

  ::v-deep .el-tabs__header {
    background: #fff;
    padding-left: 20px;
  }
}

.content {
  line-height: 10px;
}

.videoContent {
  width: 100%;
  height: calc(100vh - 150px);
  background: #fff;
  padding: 20px;
  position: relative;
}

.infoContent {
  width: 600px;
  height: auto;
  background: #f7f8fa;
  border-radius: 4px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #4e5969;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  padding: 14px;

  p {
    line-height: 26px;
  }
}

.dialog-footer {
  width: calc(100% - 40px);
  height: 60px;
  background: #ffffff;
  padding-top: 15px;
  border: none;
}

.fixedBtn {
  width: calc(100% - 40px);
  padding-left: 20px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff;
}

.action-box {
  display: flex;
  align-content: center;
  justify-content: space-between;
  margin-bottom: -5px;
}

::v-deep .scene-box {
}

::v-deep .scene {
  white-space: nowrap;
}

::v-deep .block-box {
  padding-bottom: 0;
}

::v-deep .follow_link {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>